<style>
  .echarts {
    height: 300px;
    width:100%;
  }
</style>
<template>
  <div class="layout-content-body">
    <!--<div class="chart" v-echarts="chartOptions" style="width:100%; height:400px;"></div>-->
    <chart :options="chartOptions" ></chart>
    <Row >
      <dtable :columns="columns"
              :dataAll="dataAll"
              @refresh="getall()"
              :loading="loading"></dtable>
    </Row>
  </div>
</template>
<script>
//  import echarts from 'echarts'

  // import api from '../../api'
  // import {mapMutations, mapGetters, mapState} from 'vuex'
  // import{inputString} from  '@/common/utils'
  import dtable from '../../components/table/dtable.vue'
  export default {
    data () {
      return {
        loading: true,
        columns: [
          {
            title: '人员名称',
            key: 'uname',
            sortable: true
          },
          {
            title: '单位名称',
            key: 'oname',
            sortable: true
          },
          {
            title: '部门名称',
            key: 'dname',
            sortable: true
          },
          {
            title: '登录次数',
            key: 'logincount',
            sortable: true,
          },
          {
            title: '观看次数',
            key: 'clicks',
            sortable: true,
          },
          {
            title: '观看时长',
            key: 'looklong',
            sortable: true
          },
        ],
        dataAll: [],
        spinShow: false,
        chartColumn: null,
        chartOptions:{
          title: {text: '人员统计'},
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: {
            data: [],
            axisTick: {
              show: false
            },
            axisLabel:{interval: 0}
          },
          calculable: true,
          yAxis:  [{
            axisTick: {
              show: false
            },
          }],
          legend: {
//            data: ['2011年', '2012年','2013年']
          },
          series: [{
            name: '登录次数',
            type: 'bar',
            data: []
          },
            {
              name: '观看次数',
              type: 'bar',
              data: []
            },
            {
              name: '观看时长',
              type: 'bar',
              data: []
            }]
        }
      }

    },
    components: {
      dtable,
    },
    computed: {
      // ...mapState(['isLogin', 'captchaUrl', 'cptId', 'msg']),
      filiterTableDate(){
        let e = this.dataAll.slice()
        let keys = this.searchKey
        let filterData = function (element) {
          if (keys === "") {
            return true
          }
          for (let o in element) {
            if (String(element[o]).indexOf(keys) >= 0) {
              return true
            }
          }
          return false
        }
        let fdata = e.filter(filterData)
        this.total = fdata.length
        return fdata
      },
      curTableData() {
        let from = this.pageSize * (this.current - 1)
        let to = from + this.pageSize
        return this.filiterTableDate.slice(from, to)
      },
    },
    watch: {},
    methods: {
      getall (){
        this.loading = true
        this.$api.StatisticsUser().then(res => {
          if (!res.error) {
            this.dataAll = res.Data
//            console.log(this.dataAll)
            for(let v in this.dataAll ){
              console.log(this.dataAll[v].uname)
              console.log(this.dataAll[v].looklong)
              this.chartOptions.xAxis.data.push(this.dataAll[v].uname)
              this.chartOptions.series[0].data.push(this.dataAll[v].logincount)
              this.chartOptions.series[1].data.push(this.dataAll[v].clicks)
              this.chartOptions.series[2].data.push(this.dataAll[v].looklong)
            }
            this.chartOptions.legend.data=['登录次数','观看次数','观看时长']
            if(res.Data){
              this.total = res.Data.length
            }
          } else {
            this.$Message.error(res.message)
          }
         this.loading = false
        })
      },

    },
    mounted (){
      this.getall()

    }
  }
</script>
